<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瑞成火锅</title>
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/contact.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="../js/jquery.min.js"></script>
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
</head>
<!-- 品牌实力 -->
<style>
  h6 {
    margin-top: 7%;
  }
</style>

<body>
  <div id="brand_strength">
    <div class="div_header">
      <div style="width: 100%;height: 100%;">
        <header>
          <div style="display: flex; padding-top: 2%; padding-left: 3%;">
            <div style="flex: 1;">
              <div style="display: flex; padding-left: 5%;">
                <img src="../img/logo3.png" width="150px" alt="">
                <!-- <h3 style="color: #fff;">瑞成火锅</h3> -->
              </div>
            </div>
            <div class="div_header_div_ul">
              <div style="width: 80%;margin-top: 1.5%;">
                <ul style="display: flex;">
                  <li><a href="./home.html">首页</a></li>
                  <li><a href="./Century-old_brand.html">百年品牌</a></li>
                  <li><a href="./Brand_strength.html">品牌实力</a></li>
                  <li><a href="./cooperation.html">特许合作</a></li>
                  <li><a href="./Legendary_dishes.html">传奇菜品</a></li>
                  <li><a href="./Store_navigation.html">门店导航</a></li>
                  <li><a href="./contact.html">联系我们</a></li>
                  <li><a href="./message.html">留言</a></li>
                  <li id="li_1"><a href="./login.html">登录/注册</a></li>
                  <li id="li_2"><a href="./userInfo.html">个人中心</a></li>
                </ul>
              </div>
              <div style="margin-top: 1.5%;">
                <input type="text" style=" border: 1 solid #181890; height: 30px; width: 150px;border-radius: 0;"
                  id="name">
                <button style="border: 0;padding: 3px 5px;background-color: #fff;" onclick="search()">搜索</button>
              </div>
            </div>
          </div>
        </header>
        <!-- 大图片 -->
        <section>
          <div class="bran_div_header" style="padding-left: 45%;padding-top: 10%;">
            <img src="../img/slogan_shili.png" alt="">
          </div>
        </section>
      </div>
      <!-- 品牌优势 -->
      <section class="brand_one_sec" style="background-color: #18198f;padding: 3% 0;">
        <div class="container">
          <div class="brand_one_sec_div1" style="margin-bottom: 3%;">
            <img src="../img/sub_title4.png" alt="">
          </div>
          <div style="display: flex;">
            <div class="brand_one_sec_div2" style="width: 40%;">
              <img src="../img/bj.jpg" width="100%" alt="">
            </div>
            <div style="width: 60%; color: #fff;padding-left: 3%;">
              <div class="brand_one_sec_div3">
                <h4 style="margin-bottom: 3%;margin-top: 3%;">正宗锅底</h4>
                <h6 style="margin-top: 2%;">传承多年，以正宗重庆传统码头火锅为蓝本，辅以瑞成火锅独特秘制手法，加以变化多端的火候烹调而成。
                  传统中见创新，红锅麻辣酣畅，白锅浓厚醇香，复原重庆正宗的老火锅，只呈现专属于“瑞成火锅”味道。</h6>
              </div>
              <div class="brand_one_sec_div4">
                <h4 style="margin-bottom: 3%;margin-top: 3%;">精品食材</h4>
                <h6 style="margin-top: 2%;">所有食材均经过三道手工严选，从采购、入库到加工，在每个环节都杜绝不新鲜、腐坏、蔫枯；
                  菜品加工以“袁老四”秘方佐料精心腌制，每道菜品都预留足够的出品时间，让食材充分入味，而又不失本味。</h6>
              </div>
              <div class="brand_one_sec_div5">
                <h4 style="margin-bottom: 3%;margin-top: 3%;">优质服务</h4>
                <h6 style="margin-top: 2%;">以“提供好吃嘴们满意的服务”为信念，服务人员从投递简历那一刻开始，就进入了袁老四严格的岗位筛选，100名应聘者中仅留20人。
                  岗前培训、不定期晋级培训、服务标准考核和提升，让服务真正做到高效、亲切、细致、主动。</h6>
              </div>
              <div class="brand_one_sec_div6">
                <h4 style="margin-bottom: 3%;margin-top: 3%;">优雅环境</h4>
                <h6 style="margin-top: 2%;">门店视觉设计以传统世家文化为背景，考证各方文献，以现代化的设计手法将世家元素融入到门店的每一个面向消费者的细节，古色古香且兼顾现代实用要求。
                  在袁老四，吃的不只是火锅，更是一种文化氛围。</h6>
              </div>
              <div class="brand_one_sec_div7">
                <h4 style="margin-bottom: 3%;margin-top: 3%;">高性价比</h4>
                <h6 style="margin-top: 2%;">成都人气火锅店。人均80-90，好吃不贵，大众消费水准，优质用餐体验。
                  上万消费者真实评价，将“袁老四”誉为“超高性价比的重庆正宗老火锅”。</h6>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 品牌实力 -->
      <section class="brand_two_sec" style="background-color: #18198f;padding-bottom: 5%;">
        <div style="width: 100%; display: flex;">
          <img class="brand_two_img" src="../img/ms3.jpg" width="50%" alt="">
          <div style="color: #fff;padding-left: 5%; padding-top: 5%;">
            <img src="../img/sub_title6.png" alt="">
            <h6 class="brand_two_sec_h61" style="margin-top: 15%;">四川国际美食节官方宣传片指定拍摄地</h6>
            <h6 class="brand_two_sec_h62">大众点评网2015年度受本地喜爱餐厅</h6>
            <h6 class="brand_two_sec_h63">成都《食不可挡》《吃八方》《美食现场》推荐品牌</h6>
            <h6 class="brand_two_sec_h64">第十一届四川国际美食节火锅类评选第一名</h6>
            <h6 class="brand_two_sec_h65">大众点评网2016成都必吃榜推荐餐厅</h6>
            <h6 class="brand_two_sec_h66">《成都商报》2016年火锅盛典“口味火锅品牌”</h6>
            <h6 class="brand_two_sec_h67">《成都潮生活》“2017价值品牌”</h6>
            <h6 class="brand_two_sec_h68">腾讯大成网“2017成都人气火锅”</h6>
            <h6 class="brand_two_sec_h69">《成都潮生活》“2017本地喜爱火锅品牌”</h6>
          </div>
        </div>
      </section>
      <!-- 页尾 -->
      <footer style="background-color: #000; padding: 3% 15%;">
        <div class="container">
          <div style="display: flex;">
            <div style="display: flex; width: 80%; flex-wrap: wrap;">
              <h6 class="footer_h6">首页</h6>
              <h6 class="footer_h6">百年品牌</h6>
              <h6 class="footer_h6">品牌实力</h6>
              <h6 class="footer_h6">特许合作</h6>
              <h6 class="footer_h6">传奇菜品</h6>
              <h6 class="footer_h6">门店导航</h6>
              <h6 class="footer_h6">联系我们</h6>
              <div style="width: 100%;padding-left: 3%;">
                <span class="footer_span">友情链接： 火锅加盟 美兆品牌 辣斗辣火锅</span><br>
                <span class="footer_span"> 蜀ICP备123456789号 网站建设：瑞成火锅</span><br>
                <span class="footer_span">风险提示：投资有风险，请理性选择</span>
              </div>
            </div>
            <div>
              <img src="../img/erweima.jpg" width="150px" alt="">
            </div>
          </div>
        </div>
      </footer>
    </div>
  </div>
</body>
<script>
  const inter1 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.bran_div_header', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
  })
  inter1.observe(document.querySelector('.bran_div_header'))

  const inter2 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.brand_one_sec_div1', { duration: 1, opacity: 0 })
    t1.from('.brand_one_sec_div2', { duration: 1, opacity: 0 })
    t1.from('.brand_one_sec_div3', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.brand_one_sec_div4', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.brand_one_sec_div5', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.brand_one_sec_div6', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.brand_one_sec_div7', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
  })
  inter2.observe(document.querySelector('.brand_one_sec'))

  const inter3 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.brand_two_img', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.brand_two_sec_h61', { duration: 1, opacity: 0 })
    t1.from('.brand_two_sec_h62', { duration: 1, opacity: 0 })
    t1.from('.brand_two_sec_h63', { duration: 1, opacity: 0 })
    t1.from('.brand_two_sec_h64', { duration: 1, opacity: 0 })
    t1.from('.brand_two_sec_h65', { duration: 1, opacity: 0 })
    t1.from('.brand_two_sec_h66', { duration: 1, opacity: 0 })
    t1.from('.brand_two_sec_h67', { duration: 1, opacity: 0 })
    t1.from('.brand_two_sec_h68', { duration: 1, opacity: 0 })
    t1.from('.brand_two_sec_h69', { duration: 1, opacity: 0 })
  })
  inter3.observe(document.querySelector('.brand_two_sec'))
</script>
<script>
  // 当页面刚加载完时调用
  window.onload = function () {
    if (localStorage.getItem("userId")) {
      // 说明已经登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "none";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'block';
    } else {
      //没有登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "block";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'none';
    }
  }
</script>
<script>
  function search() {
    const name = document.getElementById("name").value;
    localStorage.setItem("name",name);
    window.location.href = './shop.html'
  }
</script>

</html>